<template>
  <div>
    <!-- 头部组件 -->
    <header-tm></header-tm>
    <!-- 导航 -->
    <van-tabs v-model="activeName" @click="byId">
      <van-tab
        :title="item.name"
        v-for="item in navList"
        :key="item.id"
        :name="item.id"
      >
      <div class="cateGoods">
          <div class="title">
                <p>{{cateList.currentNav.name}}</p>
                <p>{{cateList.currentNav.front_name}}</p>
            </div>
            <ul class="list">
                <li class="item" v-for="el in cateList.data" :key="el.id">
                    <img :src="el.list_pic_url">
                    <p class="cname">{{el.name}}</p>
                    <p class="price">¥{{el.retail_price}}</p>
                </li>
            </ul>
      </div> 
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Head from "../components/Header";
import { categoryNav, goodsList } from "../../../api/home/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeName: "",
      navId: "1005000",
      navList: [],
      cateList:{currentNav:{front_name:"",name:""}},
    };
  },
  computed: {
    ...mapState(["cateId"]),
  },
  methods: {
    byId(name, title) {
      var _this = this;
      goodsList({ categoryId: name }).then((res) => {
        // console.log(111);
        // console.log(res);
        _this.cateList = res;
        console.log(_this.cateList);
      });
    },
    init() {
      var _this = this;
      this.activeName = this.cateId;
      if (this.cateId != "") {
        this.navId = this.cateId;
      }
      categoryNav({ id: this.navId }).then((res) => {
        // console.log(res);
        _this.navList = res.navData;
      });
      goodsList({ categoryId: this.navId }).then((res) => {
        // console.log(111);
        console.log(res);
        _this.cateList = res;
        console.log(_this.cateList);
      });
    },
  },
  mounted() {
    this.init();
  },
  components: {
    "header-tm": Head,
  },
};
</script>
<style lang="scss" scoped>
.cateGoods {
    background-color: #fff;
    margin-top: 10px;
    .title {
        padding: 15px;
        p {
            &:nth-child(1) {
                font-size: 15px;
                color: #333;
            }
            &:nth-child(2) {
                color: #999;
            }
        }
    }
    .list {
        overflow: hidden;
        border-top: 2px solid #f4f4f4;
        border-bottom: 2px solid #f4f4f4;
        .item {
            float: left;
            width: 50%;
            height: 242px;
            box-sizing: border-box;
            img {
                display: block;
                width: 150px;
                height: 150px;
                margin: 0 auto;
            }
            .price {
                font-size: 15px;
                color: #b4282d;
            }
            .cname {
                padding: 0 10px;
            }
            &:nth-child(odd) {
                border-right: 2px solid #f4f4f4;
                border-bottom: 2px solid #f4f4f4;
            }
            &:nth-child(even) {
                border-bottom: 2px solid #f4f4f4;
            }
        }
    }
}
</style>
